<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <title>Google Maps Game Browser $Id: index.html 304 2007-07-08 12:28:55Z mosca $</title>
    <style type="text/css">
    v\:* {
      behavior:url(#default#VML);
    }
    </style>
    <script language="JavaScript" src="http://j.maxmind.com/app/geoip.js"></script>
    <script src="key.js" type="text/javascript"></script>

    <script language="Javascript">
	    var key = _getKey();
	    var command = '<script src="http://maps.google.com/maps?file=api&amp;v=2.x&amp;key=';
	    command += key;
	    command += '" type="text/javascript"'+'>'+'<'+'/script>';
	    document.write(command);
    </script>
    <!-- <script src="markermanager.js" type="text/javascript"></script> -->
   <!-- <script src="http://gmaps-utility-library-dev.googlecode.com/svn/trunk/markermanager/src/markermanager.js" type="text/javascript"></script> -->
    <script src="gamebrowser.js" type="text/javascript"></script>
    <script type="text/javascript">
	var latitude = 0.0;
	var longitude = 0.0;
	var maxRadius = 600;
	var radius = 300;
	var limit = 100;
	var map;
	var mgr;

	function recenter() {
		findLocation();
		displayLocation();
		var center = new GLatLng(latitude, longitude, 0);
		map.setCenter(center, 5);
	}

  	function displayLocation() {
		var s = document.getElementById("latitude");
		if(s) {
			s.innerHTML=latitude;
		}
		s = document.getElementById("longitude");
		if(s) {
			s.innerHTML=longitude;
		}
	}

//#define LAT_KM_RATIO 111.2
//#define LON_KM_RATIO 70.0

	function zoomend() {
		var bounds = map.getBounds();
		var span = bounds.toSpan();
		var x = Math.abs(span.lat()) * 111.2;
		var y = Math.abs(span.lng()) * 70;
		radius = x<y ? x : y;
		radius = radius / 2;
		radius = radius > maxRadius ? maxRadius : radius;
		setupInputs();
	}

	function moveend() {
		var center = map.getCenter();
		latitude = center.lat();
		longitude = center.lng();
		displayLocation();
		fetchServers(center.lat(), center.lng(), radius, limit);
	
		if(mgr)
			mgr.refresh();
		return true;
	}

	function setupInputs() {
		var l = document.getElementById("limit");
		l.value = limit;
		l = document.getElementById("radius");
		l.value = radius;
	}

	function changeLimit() {
		var l = document.getElementById("limit");
		limit = l.value;
		return false;
	}

	function changeRadius() {
		var l = document.getElementById("radius");
		radius = l.value;
		return false;
	}
    </script>
    <script type="text/javascript">
//<![CDATA[

    function load2() {
	    if (GBrowserIsCompatible()) {
		    var map = new GMap2(document.getElementById("map"));
		    map.setCenter(new GLatLng(37.4419, -122.1419), 13);
	    }
    }


	function load() {
		//alert("load: key: "+key);
		if (GBrowserIsCompatible()) {

			findLocation();
			setupInputs();

			map = new GMap2(document.getElementById("map"));
			var center = new GLatLng(latitude, longitude, 0);
			map.setCenter(center, 5);

			mgr = new GMarkerManager(map, {borderPadding:100,trackMarkers:true});
			//mgr = new MarkerManager(map);

			map.addControl(new GLargeMapControl());
			map.addControl(new GScaleControl());
			map.addControl(new GMapTypeControl());
			map.addMapType(G_SATELLITE_3D_MAP);


			displayLocation();
			zoomend();
			moveend();
			GEvent.addListener(map, "moveend", moveend);
			GEvent.addListener(map, "zoomend", zoomend);
		}
	}

//]]>
    </script>
  </head>
  <!-- <body onload="load();"> -->
  <body onload="load();" onunload="GUnload()">
    <h2>Geographic game server locator</h2>
    <h3>(C) 2007 Marcelo Bezerra &lt; marcelo [at]
    bezerra.org &gt;</h3>
    <p>
    <script type="text/javascript">
    digg_url = 'http://digg.com/pc_games/Interesting_Counter_Strike_server_browser_with_google_maps';
    </script>
    </p>
    <p><script src="http://digg.com/tools/diggthis.js" type="text/javascript"></script></p>
    <p>
    <!-- AdSense start -->
    <script type="text/javascript"><!--
    google_ad_client = "pub-0661420919260385";
    google_ad_width = 728;
    google_ad_height = 90;
    google_ad_format = "728x90_as";
    google_ad_type = "text_image";
    //2007-07-08: GameBrowser
    google_ad_channel = "7870218048";
    google_ui_features = "rc:6";
    //-->
    </script>
    <script type="text/javascript"
      src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
    </script>
    <!-- AdSense end -->
    </p>

    <div id="map" style="width: 800px; height: 500px;"></div>
    <p>Latitude: <span id="latitude"></span><br />
    Longitude: <span id="longitude"></span><br />
    <table border=0>
    <tr>
    	<td>Limit:</td><td> <input type="text" size="10" id="limit"> <input value="change" type="button" onclick="changeLimit()"></td>
    </tr>
    <tr>
    	<td>Radius:</td><td><input type="text" size="10" id="radius"> <input value="change" type="button" onclick="changeRadius()"></td>
    </tr>
    <tr>
    	<td colspan="2">
		<input type="button" onclick="recenter()" value="Recenter">
	</td>
    </tr>
    </table><br />
    </p>
  </body>
</html>
